/**
    可拖动的悬浮窗
 */
<template>
    <div class="menu-btn-box" @click="changes" :class="status?'close':'open'"  @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" ref="super" >
        <!-- 点击展开的图标 采用插槽的形式展现 -->
        <div class="list" ref="list">
            <slot name="perip" :row="status"></slot>
        </div>
        <!-- 悬浮窗 可拖动  -->
        <div class="line-box" ref="lines">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'suspension',
  data () {
    return {
      status:true,
      touchX:'',
      touchY:'',
      odiv:null,
      fontsize:''
    }
  },
    methods:{
        changes(){
           this.status = !this.status
           this.changeline()
            if(!this.status){
                this.calcul()
            }else{
                let vnode  = this.$refs.list.querySelectorAll('.item')
                for (let i = 0; i < vnode.length; i++) {
                    vnode[i].style.left = '0px'
                    vnode[i].style.top = '0px'
                }
            }
        },
        // 点击线条旋转 
        changeline(){
            var lines = this.$refs.lines.querySelectorAll('.line')
            // console.log(lines[2].offsetTop,lines[1].offsetTop,this.fontsize);
            !this.status?(()=>{
                lines[0].style.transform= 'rotate(45deg)'  +'translate('+((lines[1].offsetTop-lines[0].offsetTop)/this.fontsize-0.2)+'rem,'+((lines[1].offsetTop-lines[0].offsetTop)/this.fontsize-0.2)+'rem)'    
                lines[1].style.opacity= 0
                lines[2].style.transform= 'rotate(-45deg)'+ 'translate('+((lines[2].offsetTop-lines[1].offsetTop)/this.fontsize-0.2)+'rem,-'+((lines[2].offsetTop-lines[1].offsetTop)/this.fontsize-0.2)+'rem)'
            })():(()=>{
                lines[0].style.transform= 'rotate(0)'+ 'translate(0,0)'
                lines[1].style.opacity= 1
                lines[2].style.transform= 'rotate(0)'+ 'translate(0,0)'
            })()
        },
        /**
         * 计算悬浮球所在位置 获取 插槽 个数
         * 右上角 top：5 -- 102；left：-102 -- 0
         * 左上角 top：4 -- 102；left：102 -- 2
         * 左下角 top：-102 -- -5；left：0 -- 102
         * 右下角 top：-102 --- 5 ；left：0 -- 102
         * 左侧 top：-102 -- 102；left：0 -- 89 --89 -0
         * 右侧：top：-102 -- 102；left：0 -- 89 --89 -0
         * @param {*} e 
         */
        calcul(){
            this.odiv = this.$refs.super
            let vnode  = this.$refs.list.querySelectorAll('.item')
            if(vnode.length!=4){
                console.log("暂时只有四 这种选项");
                return 
            }
            console.log( vnode[0].offsetTop ,"dddddddd");
            console.log(this.odiv.style.top,window.innerHeight-120);
            if(this.odiv.style.left=='20px'){
                // 中
                if(this.odiv.style.top.split('p')[0]>140 && this.odiv.style.top.split('p')[0]<window.innerHeight-120-2.866716*this.fontsize){
                    vnode[0].style.left = 0 +'px'
                    vnode[0].style.top = -102 +'px'

                    vnode[1].style.left = 89 +'px'
                    vnode[1].style.top = -51 +'px'

                    vnode[2].style.left = 89 +'px'
                    vnode[2].style.top = 51 +'px'

                    vnode[3].style.left = 0 +'px'
                    vnode[3].style.top = 102 +'px'

                
                }else if( this.odiv.style.top.split('p')[0]>=20 && this.odiv.style.top.split('p')[0]<120 ){
                    // 左上角
                    vnode[0].style.left = 102 +'px'
                    vnode[0].style.top = 5 +'px'

                    vnode[1].style.left = 87 +'px'
                    vnode[1].style.top = 54 +'px'

                    vnode[2].style.left = 50 +'px'
                    vnode[2].style.top = 90 +'px'

                    vnode[3].style.left = 0 +'px'
                    vnode[3].style.top = 102 +'px'
                }else if(this.odiv.style.top.split('p')[0]>window.innerHeight-120-2.866716*this.fontsize){
                    vnode[0].style.left = 0 +'px'
                    vnode[0].style.top = -102 +'px'

                    vnode[1].style.left = 57 +'px'
                    vnode[1].style.top = -85 +'px'

                    vnode[2].style.left = 95 +'px'
                    vnode[2].style.top = -38 +'px'

                    vnode[3].style.left = 100 +'px'
                    vnode[3].style.top = 21 +'px'
                }
            }else{
                if(this.odiv.style.top==''){
                    this.odiv.style.top =this.odiv.offsetTop+'px'
                }
                if(this.odiv.style.top.split('p')[0]>140 && this.odiv.style.top.split('p')[0]<window.innerHeight-120-2.866716*this.fontsize){
                    vnode[0].style.left = 0 +'px'
                    vnode[0].style.top = -102 +'px'

                    vnode[1].style.left = -89 +'px'
                    vnode[1].style.top = -51 +'px'

                    vnode[2].style.left = -89 +'px'
                    vnode[2].style.top = 51 +'px'

                    vnode[3].style.left = 0 +'px'
                    vnode[3].style.top = 102 +'px'

                
                }else if( this.odiv.style.top.split('p')[0]>=20 && this.odiv.style.top.split('p')[0]<140 ){
                    // 左上角
                    vnode[0].style.left = -102 +'px'
                    vnode[0].style.top = 0 +'px'

                    vnode[1].style.left = -89 +'px'
                    vnode[1].style.top = 51 +'px'

                    vnode[2].style.left = -51 +'px'
                    vnode[2].style.top = 89 +'px'

                    vnode[3].style.left = 0 +'px'
                    vnode[3].style.top = 102 +'px'
                }else if(this.odiv.style.top.split('p')[0]>window.innerHeight-120-2.866716*this.fontsize){
                    vnode[0].style.left = 0 +'px'
                    vnode[0].style.top = -102 +'px'

                    vnode[1].style.left = -50 +'px'
                    vnode[1].style.top = -90 +'px'

                    vnode[2].style.left = -87 +'px'
                    vnode[2].style.top = -54+'px'

                    vnode[3].style.left = -102 +'px'
                    vnode[3].style.top = -5 +'px'
                }
            }
           
            // console.log(this.odiv.style.top.split('p')[0],this.odiv.style.left);

           
        },
        // 触摸开始，多点触控
        touchStart(e){
            this.odiv = this.$refs.super
            this.odiv.classList.remove("transition-position")
            this.touchX = e.changedTouches[0].pageX - this.odiv.offsetLeft;
            this.touchY = e.changedTouches[0].pageY - this.odiv.offsetTop;
          
        },
        // 	接触点改变，滑动时   
        touchMove(e){
            this.status=true
            this.changeline()
            e.preventDefault();
            let left = e.changedTouches[0].pageX - this.touchX;
            let top = e.changedTouches[0].pageY - this.touchY;
            //移动当前元素
            this.odiv.style.left = left + "px";
            this.odiv.style.top = top + "px";
        },
        // 触摸结束，手指离开屏幕时
        touchEnd(e){
            this.odiv.classList.add("transition-position")
            let left = e.changedTouches[0].pageX - this.touchX;
            let top = e.changedTouches[0].pageY - this.touchY;
            if(left<0 || left <window.innerWidth/2){
                this.odiv.style.left = 20 + "px";
            }else{
                this.odiv.style.left = window.innerWidth-this.odiv.offsetHeight-36 + "px";
            }
            
            if(top<20){
                this.odiv.style.top = 20 + "px";
            }
            if(top > window.innerHeight - this.odiv.offsetHeight-36){
                this.odiv.style.top = window.innerHeight-this.odiv.offsetHeight-36 + "px";
            }

        },
        GetRootFontSize(){
            this.fontsize = getComputedStyle(window.document.documentElement)['font-size'].split('p')[0]
            
        }
        
    },
    mounted() {
        this.GetRootFontSize()
    },
    // computed: {
    //     fontsize:{
    //         get(){
    //             return getComputedStyle(window.document.documentElement)['font-size']
    //         },
    //         set(){
    //             console.log("dddddd");
    //         }
    //     }
    // },

}
</script>
<style scoped>
    .menu-btn-box{
        width:  2.866716rem;
        height: 2.866716rem;
        position: fixed;
        bottom: 120px;
        right: 36px;
        border-radius: 50%;
        z-index: 2;
    }
    .menu-btn-box.transition-position{
        transition-duration: .5s;
        transition-timing-function: ease;
        transition-property: top,left;
    }
    .line-box{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #26c2bf;
        padding: 0.5rem;
        transition-duration: .5s;
        transition-timing-function: ease;
        transition-property: transform;
    }
    /* 展开 line-box 等比例缩小0.7*/
    .menu-btn-box.open .line-box{
        transform: scale(.7);
    }
    /* 关闭 line-box 等比例放大至1 */
    .menu-btn-box.close .line-box{
        transform: scale(1);
    }
    /* 线条样式 */
    .line{
        width: 2.12rem;
        height: 0.25rem;
        margin: 0.5rem auto;
        background-color: #fff;
        border-radius: 0.11rem;
        transition-duration: .5s;
        transition-timing-function: ease;
    }

    /*  */
    .menu-btn-box .list .item{
        width: 0;
        height: 0;
        top: 0;
        left: 0;
        line-height: 2.866716rem;
        position: absolute;
        background-color: #26c2bf;
        border-radius: 50%;
        overflow: hidden;
        text-align: center;
        transform: translate(-50%,-50%);
        color: #fff;
        transition-duration: .5s;
        transition-timing-function: ease;
        transition-property: top,left,width,height,line-height;
    }
    .menu-btn-box.open .list .item{
        width:  2.966716rem;
        height: 2.966716rem;
        opacity: 1;
    }
    .menu-btn-box .list .item i{
        font-size: 33px;
    }
    .menu-btn-box .list{
        width: 0;
        height: 0;
        position: absolute;
        left: 50%;
        top: 50%;
    }
    .menu-btn-box .list .item{
        left: 0;
        top: 0;
    }
    .menu-btn-box .list .item:nth-child(1){
        transition-delay: 0s;
    }
    .menu-btn-box .list .item:nth-child(2){
    transition-delay: .1s;
    }
    .menu-btn-box .list .item:nth-child(3){
    transition-delay: .2s;
    }
    .menu-btn-box .list .item:nth-child(4){
    transition-delay: .3s;
    }

</style>